<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>22</title>
<style>
	.taiji{
		width:400px;
		height:400px;
		margin:50px auto;
		border-radius:400px;
		background-color:#000;
		animation:a3 1s linear infinite;
	}

	.taiji:before,.taiji:after {
		width:200px;
		height:400px;
		position:absolute;
		content:"";
	}

	.taiji:before{
		left:0;
		border-radius:200px 0 0 200px;
		background-color:#FFF0F5;
	}

	.taiji:after{
		right:0;
		border-radius:0 200px 200px 0;
		background-color:red;
	}

	.a1,.a2 {
		width: 200px;
		height:200px;
		position:absolute;
		z-index:2;border-radius:300px;
	}

	.a1{
		top: 0;
		left:100px;
		background-color:#FFF0F5;
	}

	.a2{
		bottom: 0;
		right:100px;
		background-color:red;
	}

	.a1:after,.a2:after{
		width:70px;
		height:75px;
		position:absolute;
		z-index:3;
		content:"";
		border-radius:75px;
	}

	.a1:after{
		top:60px;
		left:55px;
		background-color:red;
	}

	.a2:after{
		bottom:60px;
		right:55px;
		background-color:#FFF0F5;
	}

	@keyframes a3{
		from{
			transform: rotate(0deg);
		}
		to{
			transform: rotate(360deg);
		}
	}

</style>

</head>

<body>
<div class="taiji">
    <div class="a1"></div>
    <div class="a2"></div>
</div>
</body>
</html>